<template>
    <div>
        <el-button type="text" size="small" @click="insertup">添加</el-button>
    <el-table
            :data="tableData"
            style="width: 100%"
            :row-class-name="tableRowClassName">
        <el-table-column
                prop="isbn"
                label="书本编号"
                width="180">
        </el-table-column>
        <el-table-column
                prop="bookName"
                label="书名"
                width="180">
        </el-table-column>
        <el-table-column
                prop="price"
                label="价格" width="180">
        </el-table-column>
        <el-table-column label="操作">
        <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">删除</el-button>
            <el-button type="text" size="small" @click="updateClick(scope.row) ">编辑</el-button>

        </template>
        </el-table-column>
    </el-table>

    <!--添加排班信息弹窗-->
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" @close="dialogClose">
        <el-form  :model="scheForm" class="demo-form-inline" ref="scheFormRef">
            <el-form-item label="书籍id" prop="isbn">
                <el-input v-model="scheForm.isbn" placeholder="书籍id" ></el-input>
            </el-form-item>
            <el-form-item label="书籍名称" prop="bookName">
                <el-input v-model="scheForm.bookName" placeholder="书籍名称"></el-input>
            </el-form-item>
            <el-form-item label="书籍价格" prop="price">
                <el-input v-model="scheForm.price" placeholder="书籍价格"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
					<el-button @click="dialogVisible = false">取 消</el-button>
					<el-button type="primary" @click="addScheduling()">确 定</el-button>
				</span>
    </el-dialog>



        <!--添加排班信息弹窗-->
        <el-dialog title="提示" :visible.sync="dialogVisible1" width="30%" @close="dialogClose">
            <el-form  :model="scheForm1" class="demo-form-inline" ref="scheFormRef">
                <el-form-item label="书籍名称" prop="bookName">
                    <el-input v-model="scheForm1.bookName" placeholder="书籍名称"></el-input>
                </el-form-item>
                <el-form-item label="书籍价格" prop="price">
                    <el-input v-model="scheForm1.price" placeholder="书籍价格"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
					<el-button @click="dialogVisible = false">取 消</el-button>
					<el-button type="primary" @click="addScheduling1(scheForm1)">确 定</el-button>
				</span>
        </el-dialog>


        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[5, 10, 15, 20]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>
    </div>



</template>


<script>
    export default {
        name: "Student",
        data() {
            return {
                tableData: [],
                scheForm:{
                    isbn:1,
                    bookName:"",
                    price:1,
                },
                scheForm1:{},
                dialogVisible:false,
                dialogVisible1:false,
                currentPage:1,
                pageSize:5,
                total:0,
            }
        },
        created(){
            this.inited();
        },
        methods: {
            tableRowClassName({row, rowIndex}) {
                if (rowIndex === 1) {
                    return 'warning-row';
                } else if (rowIndex === 3) {
                    return 'success-row';
                }
                return '';
            },
            inited(){
                this.$wdz.get("http://localhost:8001/list/admin?current="+this.currentPage+"&pageSize="+this.pageSize).then(resp=>{
                    this.tableData=resp.data.data.list
                    this.total=resp.data.data.total;

                })
            },handleClick(row){
                this.$wdz.get("http://localhost:8001/list/admin3?id="+row.isbn).then(resp=>{
                    this.tableData=resp.data.data
                    this.inited()
                })
            },updateClick(row){
                this.$wdz.get("http://localhost:8001/list/admin5?id="+row.isbn).then(resp=>{
                    this.dialogVisible=true
                    this.scheForm.isbn=row.isbn
                    this.scheForm.bookName=row.bookName
                    this.scheForm.price=row.price
                })
            },
            addScheduling(){
                this.$wdz.post("http://localhost:8001/list/admin2",this.scheForm).then(resp=>{
                    this.tableData=resp.data.data
                    this.dialogVisible=false
                    this.scheForm={}
                    this.inited()
                })
            },
            insertup(){
               this.scheForm1={};
                this.dialogVisible1=true;

            },addScheduling1(scheForm1){
                console.log(scheForm1)
                this.$wdz.post("http://localhost:8001/list/admin1",scheForm1).then(resp=>{
                    this.dialogVisible1=false
                    this.inited()
                })

            }, handleSizeChange(val) {
                this.pageSize=val;
                this.inited();
                // console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                this.currentPage=val;
                this.inited();
                // console.log(`当前页: ${val}`);
            },


        }
    }
</script>

<style scoped>
    .el-table .warning-row {
        background: oldlace;
    }

    .el-table .success-row {
        background: #f0f9eb;
    }
</style>